<template>
  <el-card>
    <!-- 玩家列表 -->
    <div class="panel-area">
      <ul class="participants">
        <li v-for="(item, index) in nicknames" :key="index">
          <span>{{ item }} {{ item === nickname ? '（我）' : '' }}</span>
          <el-tag v-if="item === holder" size="mini">主持</el-tag>
        </li>
      </ul>
    </div>

    <!-- 按钮工具栏 -->
    <div class="panel-area button-area">
      <el-button
        v-if="!isGameStarted"
        type="primary"
        size="small"
        icon="el-icon-edit"
        @click="startGameHandler"
      >主持游戏</el-button>

      <!-- 主持人 -->
      <el-button
        v-if="isGameStarted && nickname === holder"
        type="warning"
        size="small"
        icon="el-icon-delete"
        @click="stopGameHandler"
      >终止游戏</el-button>

      <!-- 玩家 -->
      <el-button
        v-if="isGameStarted && nickname !== holder"
        type="success"
        size="small"
        icon="el-icon-magic-stick"
        @click="answerGameHandler"
      >猜答案</el-button>

      <el-button
        type="danger"
        size="small"
        icon="el-icon-switch-button"
        @click="exitHandler"
      >退出游戏</el-button>
    </div>

    <!-- 弹出框：主持人设置答案 -->
    <el-dialog
      title="请设置答案"
      :visible.sync="resultDialogVisible"
      width="30%"
    >
      <el-input v-model="expectImageName" placeholder="请输入您的答案" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="resultDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDialogHandler">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹出框：答题人设置答案 -->
    <el-dialog
      title="请填写答案"
      :visible.sync="answerDialogVisible"
      width="30%"
    >
      <el-input v-model="inputImageName" placeholder="请输入您的答案" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="answerDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="saveAnswerDialogHandler"
        >确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  data() {
    return {
      resultDialogVisible: false,
      expectImageName: '',
      answerDialogVisible: false,
      inputImageName: ''
    }
  },
  computed: {
    ...mapState(['nicknames', 'nickname', 'holder']),
    ...mapGetters(['isGameStarted'])
  },

  methods: {
    startGameHandler() {
      // 1. 显示弹框
      this.resultDialogVisible = true
      // 2. 清空输入框内容
      this.expectImageName = ''
    },

    // 主持人设置答案
    saveDialogHandler() {
      // 1. 校验答案是否为空
      if (!this.expectImageName) {
        this.$message.error('答案设置不能为空')
        return
      }
      // 2. 发送开始游戏（申请成为主持人）的请求 action
      this.$store.dispatch('sendStartGame', this.expectImageName)

      // 3. 关闭弹框
      this.resultDialogVisible = false
    },

    stopGameHandler() {
      this.$confirm('亲，你确定要终止游戏么？', '温馨提示').then(() => {
        // 发送游戏终止的申请 (action)
        this.$store.dispatch('sendStopGame')
      }).catch(e => {
        console.log(e)
      })
    },

    answerGameHandler() {
      // 显示弹框， 清空弹框内容
      this.answerDialogVisible = true
      this.inputImageName = ''
    },

    // 点击确定按钮，触发这个函数
    saveAnswerDialogHandler() {
      // 1. 检查答案是否为空
      if (!this.inputImageName) {
        this.$message.error('答案不能为空')
        return
      }
      // 2. 发送消息到服务器 action
      this.$store.dispatch('sendAnswerGame', this.inputImageName)

      // 3. 关闭弹框
      this.answerDialogVisible = false
    },
    exitHandler() {
      this.$confirm('是否要退出游戏呢？', '温馨提示').then(() => {
        // 发送退出的请求
        this.$store.dispatch('sendUserLeave')
        // 跳转到登录
        this.$router.replace('/login')
      }).catch((e) => {
        console.log(e)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-area {
  margin: 10px 0;
}
</style>
